<template>
  <div class="divBox transport">
    <el-card class="box-card" shadow="hover">
      <template v-slot:header class="clearfix">
        <div class="container">
          <el-form ref="transportRefs" :model="tableFrom" label-width="85px" class="transportCls">
            <el-row :gutter="20">
              <el-col v-bind="grid">
                <el-form-item label="公司搜索：" class="search-select">
                  <el-input v-model="tableFrom.keyword" placeholder="请输入物流公司名称" size="small" clearable>
                    <el-button slot="append" icon="el-icon-search" size="small" @click="getList('1')" />
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col v-bind="grid">
                <el-form-item label="公司状态：" class="selectFormWidth100">
                  <el-select v-model="tableFrom.isShow" placeholder="请选择公司状态" size="small" @change="getList('1')">
                    <el-option label="全部" :value="-99" />
                    <el-option label="显示" :value="1" />
                    <el-option label="不显示" :value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addTran">添加公司</el-button>
        <el-tooltip :disabled="!disabledTran" class="ml10" effect="dark" content="本页至少选择一项" placement="bottom">
          <div style="display: inline-block;">
            <el-button :disabled="disabledTran" size="small" icon="el-icon-close" type="primary" @click="delTran(null)">批量删除公司</el-button>
          </div>
        </el-tooltip>
      </template>
      <el-table
        v-loading="tranLoading"
        :data="tranList"
        style="width: 100%;"
        size="mini"
        class="table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="60"></el-table-column>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="物流公司名称" min-width="120"></el-table-column>
        <el-table-column prop="code" label="编码" min-width="120"></el-table-column>
        <el-table-column prop="sort" label="排序" sortable min-width="120"></el-table-column>
        <el-table-column label="是否显示" min-width="120">
          <template slot-scope="{ row }">
            <el-switch v-model.number="row.isShow" :active-value="1" :inactive-value="0" active-text="显示" inactive-text="隐藏" @change="change(row)" class="status"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="editTran(row.id)">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" size="small" @click="delTran(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="tranBox">
        <pagination
          v-show="pagination.total > 0"
          :total="pagination.total"
          :page.sync="pagination.page"
          :limit.sync="pagination.limit"
          :page-sizes="[10, 20, 30, 50]"
          @pagination="tranChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
  import {
    getLogisticsList as getTranList,
    patchLogisticsField as patchTranList,
    delExpressApi
  } from '@/api/setting';

  export default {
    name: 'Index',
    data() {
      return {
        grid: {
          xl: 5,
          lg: 7,
          md: 12,
          sm: 12,
          xs: 24
        },
        disabledTran: true,
        tranLoading: false,
        tranList: [],
        del: [],
        tableFrom: {
          keyword: '',
          isShow: -99
        },
        pagination: {
          page: 1,
          limit: 10,
          total: 0
        }
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      /**
       * 添加
       */
      addTran() {
        const _this = this;
        this.$modal({
          componentProps: {},
          component: (resolve) => require(['./components/tranLogisTics'], resolve),
          props: {
            title: '添加物流公司',
            customClass: 'zdyDialogCls tranDialogCls',
            width: '100%',
            closeOnClickModal: false
          },
          methods: {
            getTranList() {
              _this.getList('1');
            }
          }
        });
      },
      /**
       * 编辑
       */
      editTran(id) {
        const _this = this;
        this.$modal({
          componentProps: {
            isEdit: 1,
            id: id
          },
          component: (resolve) => require(['./components/tranLogisTics'], resolve),
          props: {
            title: '编辑物流公司',
            customClass: 'zdyDialogCls tranDialogCls',
            width: '100%'
          },
          methods: {
            getTranList() {
              _this.getList('1');
            }
          }
        });
      },
      handleSelectionChange(val) {
        this.$set(this, 'del', val.map((item) => item.id));
        this.del.length !== 0 ? this.disabledTran = false : this.disabledTran = true;
      },
      /**
       * 删除
       */
      delTran(id) {
        id || (this.del.length !== 0 && !this.disabledTran) ? this.$confirm(`删除物流公司`, {
          title: `删除物流公司`,
          message: this.$createElement('div', null, ['确定要物流公司吗？', '删除物流公司后将无法恢复，请谨慎操作！'].map((item) => this.$createElement('p', null, item))),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delExpressApi(!id ? `(${ this.del.join() })` : id).then(() => {
            this.$message.success('删除物流公司成功！')
            this.getList('1');
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: `已取消删除物流公司`
          });
        }) : this.$message.warning('请至少选择一条数据');
      },
      change(row) {
        patchTranList([{
          op: 'replace',
          path: '/isshow',
          value: row.isShow
        }], row.id).then(() => {
          this.$message.success('修改成功');
        }).catch(() => {
          row.isShow == 0 ? row.isShow = 1 : row.isShow = 0;
        });
      },
      /**
       * 查询所有物流
       */
      getList(num) {
        this.$set(this, 'tranLoading', true);
        getTranList({
          pageNumber: num ? num : this.pagination.page,
          pageSize: this.pagination.limit,
          orderBy: 'sort desc',
          keyword: this.tableFrom.keyword,
          isshow: this.tableFrom.isShow == -99 ? -1 : this.tableFrom.isShow
        }).then(res => {
          this.$set(this, 'tranList', res.data);
          this.$set(this.pagination, 'total', res.head.totalCount);
          this.$set(this, 'tranLoading', false);
        }).catch(() => {
          this.$set(this, 'tranList', []);
          this.$set(this.pagination, 'total', 0);
          this.$set(this, 'tranLoading', false);
        });
      },
      /**
       * 分页组件
       * @param disTri
       */
      tranChange(disTri) {
        this.$set(this.pagination, 'page', disTri.page);
        this.$set(this.pagination, 'limit', disTri.limit);
        this.getList();
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

<style lang="scss">
  .el-dialog.tranDialogCls {
    max-width: 700px;
  }
</style>
